<template>
    <div
        class="view-text"
        :style="{
            fontWeight: detail.style.fontWeight ? detail.style.fontWeight : 'normal',
            fontStyle: detail.style.fontStyle ? detail.style.fontStyle : 'normal',
            fontSize: detail.style.fontSize + 'px',
            fontFamily: detail.style.fontFamily,
            color: detail.style.foreColor,
            textAlign: detail.style.textAlign,
            lineHeight: detail.style.position.h + 'px',
            border: styleBorder,
            borderRadius: detail.style.borderRadius + 'px !important',
            borderColor: detail.style.waterBorderColor,
        }"
        :id="detail.identifier"
    >
        {{ textInit }}
        <div v-show="false">{{ dataInit }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

import BaseView from './View';
import topoUtil from '@/utils/topo/topo-util';
import { getAnimate } from '@/utils/topo/anime';

export default {
    name: 'viewText',
    extends: BaseView,
    computed: {
        ...mapState({
            mqttData: (state) => state.topoEditor.mqttData,
        }),
        textInit() {
            const { text, dataType, decimalDigits } = this.detail.style;
            if (/^\d+$/.test(text)) {
                if (dataType === 10) {
                    return parseInt(text).toFixed(decimalDigits);
                } else {
                    return parseInt(text).toString(dataType);
                }
            } else {
                return text;
            }
        },
        dataInit() {
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                let mqttNum = this.mqttData.serialNumber;
                let actionNum = this.detail.dataAction.serialNumber;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                    actionNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if ((this.detail.dataBind.variableType && this.detail.dataBind.variableType !== 1) || (this.detail.dataAction.variableType && this.detail.dataAction.variableType !== 1)) {
                        bindNum = this.detail.dataBind.sceneModelDeviceId;
                        mqttNum = this.mqttData.sceneModelDeviceId;
                        actionNum = this.detail.dataAction.sceneModelDeviceId;
                    }
                }
                // 数显款数值初始化
                if (bindNum && bindNum === mqttNum && this.detail.dataBind.identifier) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataBind.identifier == this.mqttData.message[i].id) {
                            let val = !this.mqttData.message[i].value ? 0 : this.mqttData.message[i].value;
                            this.setValue(val);
                        }
                    }
                }
                // 动画初始化
                if (actionNum && actionNum === mqttNum && this.detail.dataAction.identifier && this.detail.dataAction.paramJudge && this.detail.dataAction.paramJudgeData) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataAction.identifier == this.mqttData.message[i].id) {
                            let val = this.mqttData.message[i].value;
                            this.animatePlay(val);
                        }
                    }
                }
                // 颜色初始化
                if (bindNum && bindNum === mqttNum && this.detail.dataBind.identifier) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataBind.identifier == this.mqttData.message[i].id) {
                            let val = this.mqttData.message[i].value;
                            this.setColor(val);
                        }
                    }
                }
            }
        },
        styleBorder() {
            const { waterBorderWidth, waterBorderColor } = this.detail.style;
            if (waterBorderWidth && waterBorderColor) {
                return `${waterBorderWidth}px solid ${waterBorderColor}`;
            } else {
                return null;
            }
        },
    },
    mounted() {
        if (!this.editMode) {
            this.initValue();
            this.initAnimate();
            this.initColor();
        }
    },
    data() {
        return {
            defaultColor: this.detail.style.foreColor,
        };
    },
    methods: {
        // 设置初始值
        initValue() {
            let value = !this.detail.dataBind.modelValue ? 0 : this.detail.dataBind.modelValue;
            this.setValue(value);
        },
        // 设置值
        setValue(val) {
            if (this.detail.componentShow.indexOf('参数绑定') > -1) {
                let unit = this.detail.dataBind.unit ? this.detail.dataBind.unit : '';
                this.detail.style.text = val + unit;
            }
        },
        // 动画初始化
        initAnimate() {
            let value = !this.detail.dataAction.modelValue ? 0 : this.detail.dataAction.modelValue;
            this.animatePlay(value);
        },
        // 开始动画
        animatePlay(val) {
            let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, val, this.detail.dataAction.paramJudgeData);
            if (isGd) {
                if (this.detail.dataAction.xyAction) {
                    // 显隐判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        display: 'block',
                    });
                }
                if (this.detail.dataAction.maAction) {
                    // 明暗判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        filter: 'brightness(0.5)',
                    });
                }
                if (this.animateView) {
                    this.animateView.play();
                }
            } else {
                if (this.detail.dataAction.xyAction) {
                    // 显隐判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        display: 'none',
                    });
                }
                if (this.detail.dataAction.maAction) {
                    // 明暗判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        filter: 'brightness(1)',
                    });
                }
                if (this.animateView) {
                    this.animateView.pause();
                }
            }
        },
        // 颜色初始化
        initColor() {
            let value = !this.detail.dataBind.modelValue ? 0 : this.detail.dataBind.modelValue;
            this.setColor(value);
        },
        // 设置颜色
        setColor(val) {
            const { stateList } = this.detail.dataBind || {};
            if (stateList && stateList.length !== 0) {
                const stateItem = stateList.find((item) => topoUtil.judgeSize(item.paramCondition, val, item.paramData));
                if (stateItem) {
                    this.detail.style.foreColor = stateItem.foreColor;
                } else {
                    this.detail.style.foreColor = this.defaultColor;
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.view-text {
    height: 100%;
    width: 100%;
}
</style>
